<!--
 * @Description:
 * @Author: 张效玮2 yythis@163.com
 * @Date: 2025-08-11 10:05:29
 * @LastEditors: 张效玮2
 * @LastEditTime: 2025-08-14 20:33:34
-->
<script setup lang="ts">
import { usePersonaMaintenance } from "./composables/usePersonaMaintenance"

// 使用业务逻辑
const {
  loading,
  searchKeyword,
  selectedStoreType,
  storeTypeOptions,
  filteredPersonas,
  showCreateDialog,
  currentEditPersona,
  headerButtons,
  handleCreatePersona,
  closeDialog,
  handleViewAudience
} = usePersonaMaintenance()
</script>

<template>
  <div class="app-container">
    <!-- 页面头部 -->
    <PageHeader
      title="账号人设维护"
      subtitle="管理所有人设的受众画像、推荐模板和对标账号配置"
      :buttons="headerButtons"
    />

    <!-- 搜索区域 -->
    <div class="search-section">
      <el-input
        v-model="searchKeyword"
        placeholder="搜索人设名称或店铺类型..."
        class="search-box"
        clearable
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>

      <el-select
        v-model="selectedStoreType"
        placeholder="全部类型"
        class="store-type-select"
        clearable
      >
        <el-option
          v-for="option in storeTypeOptions"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
    </div>

    <!-- 人设列表 -->
    <div v-loading="loading" class="personas-grid">
      <PersonaCard
        v-for="persona in filteredPersonas"
        :key="persona.id"
        :persona="persona"
        @view-audience="handleViewAudience"
      />
    </div>
    <div v-if="!loading && filteredPersonas.length === 0" class="empty-state">
      <el-empty description="暂无人设数据" />
    </div>

    <!-- 新增/编辑弹窗 -->
    <PersonaDialog
      v-model:visible="showCreateDialog"
      :persona="currentEditPersona"
      :store-type-options="storeTypeOptions"
      @confirm="handleCreatePersona"
      @cancel="closeDialog"
    />
  </div>
</template>

<style lang="scss" scoped>
@import "./styles/index.scss";
</style>
